@charset "utf-8";
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    header{
        width: 100%;
        height: r(90);
        background: black;
        position: absolute;
        top:0;
        .header_left{
            float: left;
            margin-left: r(37);
            box-sizing: border-box;
            >a{
                font-size: r(50);
                color: white;
                line-height: r(90);
            }
        }
        .header_right{
            float: right;
            width: r(35);
            height: r(35);
            margin-right: r(37);
            box-sizing: border-box;
            a{
                width: 100%;
                height: 100%;
                line-height: r(90);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        h5{
            width: r(100);
            color: white;
            font-size: r(33);
            margin: 0 auto;
            line-height: r(90);
            text-align: center;
        }
    }
    section{
        width: 100%;
        position: absolute;
        top: r(90);
        bottom: 0;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .carou{
            width: 100%;
            height: r(267);
            background: #009fe8;
            h1{
               text-align: center;
               font-size: r(56);
               font-weight: normal;
               box-sizing: border-box;
               padding-top: r(70);
               color: white;
            }
            p{
               text-align: center;
               font-size: r(19);
               line-height: r(60);
               color: white;
            }
        }
        .brand{
            width: 92%;
            margin: 0 auto;
            margin-top: r(30);
            .brand_left{
                width: r(330);
                height: 100%;
                .left_1{
                    width: 100%;
                    .brand_img{
                        width: r(330);
                        height: r(475);
                        a{
                            display: block;
                            width: 100%;
                            height: 100%;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    p{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    p:first-of-type{
                         font-size: r(19);
                         color: #777777;
                         padding-top: r(23);
                         line-height: r(35);
                    }
                    p:nth-of-type(2),p:nth-of-type(3){
                        font-size: r(30);
                        line-height: r(41);
                    }
                    p:last-of-type{
                        font-size: r(20);
                        padding-bottom: r(25);
                        span{
                            text-decoration: line-through;
                            font-size: r(20);
                            color: #777777;
                            padding-right: r(22);
                        }
                    }
                }
                .right_1{
                    .brand_img{
                        width: r(330);
                        height: r(330);
                    }
                }
            }
            .brand_right{
                width: r(330);
                height: 100%;
                .right_1{
                    .brand_img{
                        width: r(330);
                        height: r(330);
                    }
                }
            }
        }
    }       
}